<template>
	<qh-tabbar-page-view type="2" current="0" bgColor="var(--primary-color)" :showNavbar="false">
		<view v-if="pageLoading" style="padding-top: 44px;">
			<ant-skeleton />
		</view>
		<template v-else>
			<!--默认模板样式-->
			<define-template class="store-template" ref="define" v-if="template_type==1" :templateData="{
				storeList,phone,storeName,store_switch,cityCode,store_id
			}"></define-template>
			<!--旧版DIY样式-->
			<old-diy ref="oldDiy" v-if="template_type==2"></old-diy>
			<!--新版DIY样式-->
			<diy-template ref="newDiy" :scrollTop="scrollTop" v-if="template_type==3 && store_id>0" :pageContent="page_content"></diy-template>
		</template>
	</qh-tabbar-page-view>
</template>
<script>
	var app = getApp().globalData
	import diyTemplate from "@/components/common/diy_template";
	import defineTemplate from "@/components/common/define_template";
	import oldDiy from "@/components/common/page_old_diy";

	export default {
		components: {
			oldDiy,
			defineTemplate,
			diyTemplate
		},
		data() {
			return {
				template_type: 0, // 0是未获取 1是默认页面 2是版本装修页面 3是新版装修页面
				storeList: [], // 门店列表
				phone: "", // 手机号
				storeName: "", // 门店名称
				store_switch: 1,
				cityCode: "", // 支付宝用城市编码
				store_id: 0, // 当前进入的门店ID
				page_id: "", // 装修的id
				scrollTop: 0, // 页面滚动高度
				pageLoading: true,
				onLoaded: false,
				page_content: '', //新版DIY数据
				oldDiyData: {}, //旧版DIY数据
			}
		},
		async onLoad() {
			await this.$onLaunched;
			// 判断是否开启前置页 
			getApp().globalData.resetStoreId();

			if (!this.storeList.length || this.storeList[0].store_id != this.$store.store_id) {
				await this.getStoreList();
			}
			this.onLoaded = true;
			if (!this.storeList.length) return;
			await this.checkTemplateType();
			//新增访问门店记录
			app.sendRequest({
				url: '/My/addUserVisitStoreRecord',
			})
			// #ifdef MP-WEIXIN
			uni.showShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			});
			// #endif
		},
		async onShow() {
			await this.$onLaunched;
			if (this.onLoaded) {
				getApp().globalData.resetStoreId();
				if (!this.storeList.length || this.storeList[0].store_id != this.$store.store_id) {
					await this.getStoreList();
				}
				if (!this.storeList.length) return;
				await this.checkTemplateType()
			}
		},
		methods: {
			// 获取装修数据 判断前端应该使用哪个模板
			async checkTemplateType() {
				let newDiyState = await this.getPageData();
				if (newDiyState) {
					this.template_type = 3
				} else {
					// 查找老版本装修和默认模板的状态
					if (this.storeList[0].old_diy_status == 1) {
						let oldDiyState = await this.getOldPageData();

						if (oldDiyState) {
							this.template_type = 2
						} else {
							this.template_type = 1
						}
					} else {
						this.template_type = 1
					}
				}
				// 要触发插件里面的onshows方法
				this.$nextTick(() => {
					let template_arr = [
						"define", "oldDiy", "newDiy"
					];
					this.$refs[template_arr[this.template_type - 1]] && this.$refs[template_arr[this.template_type - 1]].onShows();
				})
			},
			// 获取老版本的装修数据
			getOldPageData() {
				return new Promise(async resolve => {
					try {
						const {
							diy_status,
							status,
							data,
							plug_state,
							store_merchant,
							message
						} = await this.$request('/SmallProgramApi/Diy/getStoreDiy_v1');
						if (status == 1 && diy_status == 1) {
							this.oldDiyData = {
								totalData: data,
								plugState: plug_state,
								isMerchantDiy: store_merchant == 2 ? true : false,
							};
							this.$nextTick(() => {
								resolve(true);
							})
						} else {
							resolve(false);
						}
					} catch (err) {
						console.error('getOldPageData', err)
						resolve(false);
					}
				})
			},
			// 获取装修的DIY数据
			getPageData() {
				return new Promise(async resolve => {
					try {
						const {
							status,
							data,
							message,
						} = await this.$request('DiyStore/Api/getPageData', {
							needErrorMsg: false
						});
						if (status == 1) {
							this.page_content = data.content;
							this.$nextTick(() => {
								resolve(true);
							})
						} else {
							resolve(false);
						}
					} catch (err) {
						resolve(false);
					}
				})
			},
			// 获取所有的门店数据
			getStoreList() {
				return new Promise((resolve, reject) => {
					app.getStoreList(false, this.$store.begin_store_id ? this.$store.begin_store_id : '').then((res) => {
						if (res.store && res.store.length) {
							this.pageLoading = false;
							this.$store.store_id = res.store[0].store_id;
							this.setData({
								store_id: res.store[0].store_id,
								storeList: res.store,
								phone: res.store[0].phone,
								storeName: res.store[0].store_name,
								store_switch: res.store_switch,
								// #ifdef MP-ALIPAY
								cityCode: res.store[0].cityCode,
								// #endif
							});
							uni.setStorageSync('storeInfo', res.store[0]);

							var newPeopleStorage = uni.getStorageSync('newPeopleStorage');

							if (!newPeopleStorage) {
								uni.setStorageSync('newPeopleStorage', 'true');
							}
							resolve(true);
						} else {
							reject(false)
						}
					}).catch(() => {
						reject(false)
					})
				})
			}
		},
		
		onShareAppMessage() {
			return {
				title: this.storeList[0] ? this.storeList[0].store_name : this.store_name,
				path: '/pages/store/store?store_id=' + this.$store.store_id + '&share_uid=' + app.XcxData.userInfo.uid,
			};
		},
		onShareTimeline(res) {
			return {
				title: this.storeList[0].store_name,
				query: 'store_id=' + this.storeList[0].store_id
			}
		}
	}
</script>
<style lang="scss">
	.store-template {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.uni-navbar__content {
		z-index: 1002 !important;
	}

	page {
		background-color: #f6f6f6;
		font-size: 0;
		width: 100vw;
		height: 100vh;
		padding-bottom: 0;
	}

	// .choose-sku-container {
	// 	position: fixed;
	// 	width: 100vw;
	// 	height: 100vh;
	// 	top: 0;
	// 	left: 0;
	// 	background-color: rgba(0, 0, 0, 0.3);
	// 	z-index: 10;
	// }

	// @font-face {
	// 	font-family: 'iconfont';
	// 	src: url('~@/static/iconfont/iconfont.eot');
	// 	src: url('~@/static/iconfont/iconfont.eot?#iefix') format('embedded-opentype'),
	// 		url('~@/static/iconfont/iconfont.woff2') format('woff2'),
	// 		url('~@/static/iconfont/iconfont.woff') format('woff'),
	// 		url('~@/static/iconfont/iconfont.ttf') format('truetype'),
	// 		url('~@/static/iconfont/iconfont.svg#iconfont') format('svg');	
	// }

	// .iconfont {
	// 	font-family: "iconfont" !important;
	// 	font-size: 16px;
	// 	font-style: normal;
	// 	-webkit-font-smoothing: antialiased;
	// 	-moz-osx-font-smoothing: grayscale;
	// }

	// .icon-dingwei:before {
	// 	content: "\e63e";
	// }

	// .icon-arrow-down-s-fill:before {
	// 	content: "\e72b";
	// }

	// .icon-un-scan-o:before {
	// 	content: "\e6be";
	// }

	// .icon-search:before {
	// 	content: "\e626";
	// }

	// .icon-erweima:before {
	// 	content: "\e71e";
	// }

	// .icon-coupon:before {
	// 	content: "\e606";
	// }
</style>
